import React, { Suspense } from 'react';
import { RouteObject } from 'react-router-dom';
import Loading from './component/Loading';
import { RouteGuard } from './component/RouteGuard';
export namespace Paths {
  export enum All {
    Root = "",
    Main = "/",
    Main_With_Page = "/page/:page",
    Main_With_Tag_Page = "/tag/:tag/page/:page",
    Edtior = "/edtior",
    About = "/about",
    _ArticleList = "/article_list",
    Article = "/article/:article_id",
    Chatroom = "/chatroom",
    Coding = "/coding",
    Firework = "/firework",
    ChineseChess = "/chinese_chess",
    Chess = "/chess",
    Bounce = '/bounce',
  }
  export const Components: Record<All, React.ComponentType | undefined> = {
    [All.Root]: undefined,
    [All.Main]: React.lazy(() => import('@/pages/Main')),
    [All.Edtior]: React.lazy(() => import('@/pages/BlogEditor')),
    [All.Article]: React.lazy(() => import('@/pages/Main/Article')),
    [All._ArticleList]: React.lazy(() => import('@/pages/Main/ArticaleListView')),
    [All.Coding]: React.lazy(() => import('@/pages/CodeEditor')),
    [All.Chatroom]: React.lazy(() => import('@/pages/Chatroom')),
    [All.About]: React.lazy(() => import('@/pages/Main/About')),
    [All.Firework]: React.lazy(() => import('@/pages/Firework')),
    [All.ChineseChess]: React.lazy(() => import('@/pages/ChineseChess')),
    [All.Chess]: React.lazy(() => import('@/pages/Chess')),
    [All.Bounce]: React.lazy(() => import('@/third/bounce_tales/react')),
    [All.Main_With_Page]: React.lazy(() => import('@/pages/Main/ArticaleListView')),
    [All.Main_With_Tag_Page]: React.lazy(() => import('@/pages/Main/ArticaleListView')),
  }
  export const Indexs: Partial<Record<All, All>> = {
    [All.Main]: All._ArticleList,
  }
  export const Relations: Partial<Record<All, All[]>> = {
    [All.Root]: [
      All.Main,
      All.Edtior,
      All.Coding,
      All.Chatroom
    ],
    [All.Main]: [
      All.Article,
      All.About,
      All.Firework,
      All.ChineseChess,
      All.Chess,
      All.Bounce,
      All.Main_With_Page,
      All.Main_With_Tag_Page
    ],
  }
  export const Guardeds: Partial<Record<All, boolean>> = {
    [All.Edtior]: true,
  }
  export const Routes: RouteObject[] = buildRoutes(All.Root)!
  export const Titles: Record<All, string | null> = {
    [All.Root]: null,
    [All.Main]: null,
    [All.Main_With_Page]: null,
    [All.Edtior]: null,
    [All.About]: "关于我",
    [All._ArticleList]: null,
    [All.Article]: null,
    [All.Chatroom]: null,
    [All.Coding]: null,
    [All.Firework]: '烟花',
    [All.ChineseChess]: '中国象棋',
    [All.Chess]: '国际象棋',
    [All.Bounce]: '弹跳传说',
    [All.Main_With_Tag_Page]: null
  }
  function buildRoute(path: All, index: boolean = false): RouteObject {
    const Component = Components[path] ?? (() => <>Component of "{path}" not found!</>);
    const guarded = Guardeds[path] === true;
    const element = (
      <RouteGuard auth={guarded} >
        <Suspense fallback={<Loading />}>
          <Component />
        </Suspense>
      </RouteGuard>
    )
    const children = buildRoutes(path)
    const ret: RouteObject = index ? { index, element } : { path, element }
    if (children?.length) ret.children = children;
    return ret
  }
  function buildRoutes(parent: All): RouteObject[] | undefined {
    const index_path = Indexs[parent] ?? false;
    const children_path = Relations[parent] ?? [];
    if (index_path === false && !children_path?.length)
      return void 0

    const ret: RouteObject[] = children_path.map(path => buildRoute(path))
    if (index_path !== false) ret.unshift(buildRoute(index_path, true))

    return ret;
  }
}
